<template>
  <div>
    <van-nav-bar title="矿池" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
    <main>
      <img :src="img" alt />
      <div>
        <p>50个</p>
        <p>今日产出（G5）</p>
      </div>
      <ul>
        <li>
          <p>1000</p>
          <p>矿池总产量</p>
        </li>
        <li>
          <p>40</p>
          <p>昨日产量</p>
        </li>
      </ul>
      <p>如果今日矿池没有领取，矿机停止工作，直到当前产出被领走。</p>
    </main>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      img: require("../../assets/img/orepool/kuangchi.png")
    };
  },

  methods: {}
};
</script>

<style lang="less" scoped>
main {
  position: relative;
  padding: 60px 15px 0;
  font-size: 13px;
  color: #767994;
  line-height: 20px;
  text-align: center;

  > img {
    width: calc(100% - 92px);
    height: auto;
    margin-bottom: 60px;
  }
  > p {
    font-size: 12px;
    color: #ffffff;
  }
  > ul {
    color: #ffffff;
    margin-bottom: 60px;
    > li {
      width: 100px;
      display: inline-block;
      line-height: 30px;
      > p:nth-child(1) {
        font-size: 14px;
      }
      > p:nth-child(2) {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }
    }
    > li:nth-child(1) {
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
  > div {
    position: absolute;
    width: calc(100% - 30px);
    top: 140px;
    font-size: 30px;
    color: #ffffff;
    line-height: 40px;
    p:nth-child(2) {
      font-size: 16px;
    }
  }
}
.van-nav-bar {
  background: transparent;
}
</style>
<style lang="less">
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    298deg,
    rgba(75, 159, 226, 1) 0%,
    rgba(63, 84, 192, 1) 100%
  );
}
</style>
